<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<body>
  <!-- 从子组件触发事件html 出发，再到emit，再到父层面，即调用子组件的html处，看父的事件-->
  <div id="counter-event-example">
    <p>{{ total }}</p>
    <!-- v-on:increment1 代表 子的事件 =右边是父的 -->
    <!-- 点击的时候，触发子按钮的事件，$emit再出发父的，即等号 右边的事件 -->
    <button-counter v-on:increment1="incrementTotal1"></button-counter>
    <button-counter v-on:increment2="incrementTotal2"></button-counter>
  </div>
</body>

<script>
  Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{ counter }}</button>',
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      increment: function () {
        this.counter += 1;
        this.$emit('increment1', "这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
        //  this.$emit('increment2');  //此时不会触发自定义increment2的函数。

      }
    }
  });
  new Vue({
    el: '#counter-event-example',
    data: {
      total: 0
    },
    methods: {
      incrementTotal1: function (e) {
        this.total += 1;
        console.log(e);
      },
      incrementTotal2: function () {
        this.total += 4;
      }
    }
  })
</script>

</html>
<!-- 对上面的例子进行进一步的解析：
1、首先看 自定组件button-counter ，给其绑定了方法 ：increment；
2、点击button时会执行函数 increment，increment中有 this.$emit(‘increment1’,”这个位子是可以加参数的”);
3、当increment执行时，就会触发自定函数increment1，也就是incrementTotal1函数；
4、而increment执行时没有触发自定义函数increment2，所以点击第二个按钮不执行incrementTotal2的函数。
————————————————
版权声明：本文为CSDN博主「有一个王小森」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/75258013 -->

<!-- https://blog.csdn.net/hayre/article/details/60572435 -->